<template>
	<div class="product-detail">
		<div class="pd-header"
			id="pd-header"
			v-if="isLoadDom"
		>
			<div class="ah-back"
				@click="goBack()"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<swiper :options="swiperOption"
				class="pd-topimg"
			>
		        <swiper-slide v-for="(img, index) in imgList"
					:key="index"
		        >
		        	<img :src="img" 
		        		lazy="loaded" 
		        		v-if="proType == 1 || proType == 2"
		        	/> 
		        	<img :src="img" lazy="loaded" v-if="proType == 3 || proType == 4"/>
		        </swiper-slide>
		        <div class="swiper-pagination" slot="pagination"></div>
		    </swiper>
		    <div class="more">
		    	<i class="iconfont"
					@click="lookMore()"
		    	>&#xe60a;</i>
		    	<div class="more-c"
					v-if="isMore"
		    	>
		    		<span></span>
		    		<ul>
		    			<li class="border-1px"
							@click="goIndex()"
		    			>首页</li>
		    			<li @click="goUser()">我的</li>
		    		</ul>
		    	</div>
		    </div>
		</div>		
		<div class="pd-top border-1px"
			id="pd-top"
			v-if="isLoadDom"
		>
			<div class="at-back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="at-content">
				<p>商品详情</p>
			</div>
			<div class="more">
		    	<i class="iconfont"
					@click="lookMore()"
		    	>&#xe60a;</i>
		    	<div class="more-c"
					v-if="isMore"
		    	>
		    		<span></span>
		    		<ul>
		    			<li class="border-1px"
							@click="goIndex()"
		    			>首页</li>
		    			<li @click="goUser()">我的</li>
		    		</ul>
		    	</div>
		    </div>
		</div>
		<div class="pd-profile border-1px"
			v-if="isLoadDom"
		>
			<div class="pdp-title"
				v-if="isLoadDom"
			>
				<p class="two-line"><span class="TBimg" v-show="this.type == 2"></span><span class="TMimg" v-show="this.type == 1"></span><span class="JDimg" v-show="this.type == 3"></span><span class="PDDimg" v-show="this.type == 4"></span>{{title}}</p>
			</div>
			<p class="pdp-subtitle" v-show="this.type == 1 || this.type == 2 && isLoadDom">{{sub_title}}</p>
			<div class="pdp-price" v-show="this.type == 1 || this.type == 2 && isLoadDom">
				<div class="pdp-origin">
					<p class="coupon-price">
						<span>￥</span>{{coupon_price}}
					</p>
					<p class="origin-price">
						原价:<span>￥{{origin_price}}</span>
					</p>
				</div>
				<p class="pdp-sale">
					月销售：{{products.volume}}
				</p>
			</div>
			<div class="pdp-price active" v-show="this.type == 4">
				<div class="pdp-origin">
					<p class="coupon-price">
						<span>￥</span>{{coupon_price}}
					</p>
					<p class="origin-price">
						拼多多价:<span>￥{{origin_price}}</span>
					</p>
				</div>
				<p class="pdp-sale">
					月销售：{{products.sold_quantity}}
				</p>
			</div>
			<div class="pdp-price active" v-show="this.type == 3">
				<div class="pdp-origin">
					<p class="coupon-price">
						<span>￥</span>{{coupon_price}}
					</p>
					<p class="origin-price">
						京东价:<span>￥{{origin_price}}</span>
					</p>
				</div>
				<!-- <p class="pdp-sale">
					月销售：{{products.sold_quantity}}
				</p> -->
			</div>
			<transition name="fade">
				<div class="pdp-coupon" v-show="this.type == 1 || this.type == 2"
					:style="{background: 'linear-gradient(to right,' + colorLeft + ',' + colorRight + ')'}"
					v-if="products.coupon_info > 0"
				>
					<div class="coupon-left">
						<p>{{quan_price}}元优惠券</p>
						<span>有效期至{{time || coupon_end_time || products.coupon_end_time}}</span>
					</div>
					<div class="coupon-right"
						@click="goApp()"
					>
						<p>立即领券</p>
						<div class="dott"></div>
						<div class="dotb"></div>
						<div class="dots">
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
						</div>
					</div>				
				</div>
			</transition>
			<transition name="fade">
				<div class="pdp-coupon" v-show="this.type == 4"
					:style="{background: 'linear-gradient(to right,' + colorLeft + ',' + colorRight + ')'}"
				>
					<div class="coupon-left">
						<p>{{quan_price}}元优惠券</p>
						<span>有效期至{{products.coupon_end_time}}</span>
					</div>
					<div class="coupon-right"
						@click="goApp()"
					>
						<p>立即领券</p>
						<div class="dott"></div>
						<div class="dotb"></div>
						<div class="dots">
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
						</div>
					</div>
				</div>
			</transition>
			<transition name="fade">
				<div class="pdp-coupon" v-show="this.type == 3"
					:style="{background: 'linear-gradient(to right,' + colorLeft + ',' + colorRight + ')'}"
				>
					<div class="coupon-left">
						<p>{{quan_price}}元优惠券</p>
						<span>有效期至{{time}}</span>
					</div>
					<div class="coupon-right"
						@click="goApp()"
					>
						<p>立即领券</p>
						<div class="dott"></div>
						<div class="dotb"></div>
						<div class="dots">
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
							<div class="dot"></div>
						</div>
					</div>
				</div>
			</transition>
		</div>
		<div class="pd-detail-pdd" v-if="this.type == 4 && isLoadDom">
			<h1>商品详情</h1>
			<p>{{products.goods_desc}}</p>
		</div>
		<div class="pd-detail" v-show="this.type == 1 || this.type == 2 && isLoadDom">
			<div class="pdd-header border-1px"
				@click="conShow()"
			>
				<p>查看宝贝详情</p>
				<i class="iconfont" v-show="!cShow">&#xe6a6;</i>
				<i class="iconfont" v-show="cShow">&#xe6a5;</i>
			</div>
			<div class="pdd-content"
				v-show="cShow"
			>
				<div class="pdd-content-nav">
					<p @click="imageShow()"
						:class="{ active: imgShow }"
					>商品详情</p>
					<p @click="titleShow()"
						:class="{ active: itemShow }"
					>商品参数</p>
				</div>
				<div class="pdd-content-imgs"
					v-show="imgShow"
					v-for="(img, index) in proImgList"
				>
					<img v-lazy="img" />
				</div>
				<div class="img-none"
					v-if="imgShow && proImgList.length == 0"
				>
					<img src="../assets/img/nodata.png" />
				</div>
				<div class="pdd-content-items"
					v-show="itemShow"
				>
					<div v-for="(item, index) in items">
						<p class="border-1px" v-for="(value, key)  in item">{{value}}</p>
					</div>
					
				</div>
			</div>
		</div>
		<div class="pd-like" v-show="this.type == 1 || this.type == 2 && goodsList != undefined && isLoadDom">
			<div class="pd-like-header">
				<div class="line"></div>
				<div class="title"><i class="icon"></i>猜你喜欢</div>
				<div class="line"></div>
			</div>
			<GoodOne :goodsList=goodsList :proType=type></GoodOne>
		</div>
		<div class="no-place"></div>
		<div class="pd-footer bordertop-1px"
			v-if="isLoadDom"
		>
			<div class="pd-footer-left"
				@click="collect()"
				:class="{ active: this.is_collect == 1}"
			>
				<i class="iconfont">&#xe6a0;</i>
				<span v-show="this.is_collect == 0">收藏</span>
				<span v-show="this.is_collect == 1">已收藏</span>
			</div>
			<div class="pd-footer-mid"
				@click="share()"
				:style="{background: colorMid }"
			>
				<i class="iconfont">&#xe60b;</i>
				<span>分享宝贝</span>
			</div>
			<div class="pd-footer-right"
				@click="goApp()"
				:style="{background: 'linear-gradient(to right,' + colorLeft + ',' + colorRight + ')'}"
			>
				<i class="pdf-coupon"></i>
				<span>领券购买</span>
			</div>
		</div>
		<div class="dialog"
			v-if="diaShow"
			@click="diaShow = false"
		>
			<div class="dia-content"
				@click.stop="diaShow=true"
			>
				<div class="dc-header">
					淘口令购买
				</div>
				<div class="dc-text">
					{{products.title}}<br/>
					原价：{{products.zk_final_price || 0}}元<br/>
					优惠券：{{products.coupon_info || 0}}元<br/>
					券后价：{{(products.zk_final_price - products.coupon_info).toFixed(1) || 0}}元<br/>
					-----------------<br/>
					复制这条信息打开【手机淘宝】领券下单{{PWD}}<br/>
				</div>
				<div class="dc-btn"
					v-clipboard:copy="pwd_c"
					v-clipboard:success="onCopy"
					v-clipboard:error="onError"
				>
					<p>一键复制</p>
				</div>
				<div class="dc-tip">
					<p>点击复制后，打开淘宝购买</p>
					<p>注：若一键复制失败，请长按<span></span>内文字 或 用【浏览器领券】模式</p>
				</div>	
			</div>
			<div class="dia-close"
				@click="diaShow=false"
			>
				<i class="iconfont">&#xe69a;</i>
			</div>
		</div>
		<div class="float-box"
			v-if="(products.fan_price || fan_price) && isLoadDom "
		>
			<div class="fb-top">
				<p>自购省</p>
				<p>￥{{fan_price || products.fan_price}}</p>
			</div>
			<div class="fb-bottom">
				<p>分享赚</p>
				<p>￥{{fan_price || products.fan_price}}</p>
			</div>
		</div>
		<GoTop :goTop="goTop"
            v-show="topclass"
        ></GoTop>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	import GoTop from '../components/GoTop.vue'
	import GoodOne from '../components/goods_three.vue'
	import * as types from '../store/types.js'
	export default{
		components: {
			GoTop,
			GoodOne
		},
		data () {
			return{
				isMore: false,
				PWD: '',
				pwd_c: '',
				diaShow: false,
				cShow: false,
				imgShow: true,
				itemShow: false,
				topclass: false,
				goodsList: [],
				imgList: [],
				goods: [],
				items: [],
				model: 1,
				proImgList: [],
				products: [],
				pddUrlList: [],
				type: 0,
				title:this.$route.query.title,
				time: '',
				coupon_price: this.$route.query.coupon_price,
				fan_price: this.$route.query.fan_price || '',
				origin_price: this.$route.query.origin_price,
				quan_price: this.$route.query.quan_price,
				sub_title: this.$route.query.sub_title,
				coupon_end_time: this.$route.query.coupon_end_time,
				proType: this.$route.query.type,
				is_collect: this.$route.query.is_collect,
				goods_id: this.$route.params.id,
				image: this.$route.query.image,
				swiperOption: {
					pagination: {
						el: '.swiper-pagination',
						type: 'fraction'
					},
		        },
		        colorLeft: window.localStorage.getItem("left"), 
				colorRight: window.localStorage.getItem("right"), 
				colorMid: window.localStorage.getItem("mid"),
				root_price: 0,
				isLoadDom: false
			}
		},
		beforeMount(){
			this.type = parseInt(this.proType);
			if( this.type == 1 || this.type == 2){
				this.getData();
				this.getUrl();
				this.getLikeData();			
				this.getProData();
			}else if(this.type == 3){
				this.getJdData();
				// this.getJdProData();
			}else{
				// this.getPddProData();
				this.getPddData();
				this.getPddUrl();
			}
			var end_time = this.$route.query.quan_time;
			if (end_time) {
				this.time = types.timeStamp(false, end_time);
			}
		},
		mounted: function(){
			window.addEventListener('scroll', this.handleScroll);
			document.title = this.title;
			var d = new Date(this.coupon_start_time * 1000);
			this.coupon_start_time = (d.getFullYear()) + "-" + 
							           (d.getMonth() + 1) + "-" +
							           (d.getDate())
		},
		updated(){
			this.isLoadDom = true;
		},
		watch: {
		    '$route' (to, from) {
		    	this.$router.go(0);
			}
		},
		methods: {
			onCopy: function (e) {
		        Toast('复制成功')
		    },
		    onError: function (e) {
		        Toast('无法复制文本！')
		    },
			goTop: function(){
                document.getElementById("pd-header").scrollIntoView()
            },
            goBack: function(){
            	this.$router.go(-1)
            },
            lookMore: function(){
            	this.isMore = !this.isMore
            },
            share: function(){
            	if (this.type == 1 || this.type == 2) {
            		this.$router.push({
						path: '/share/goods/' + this.goods_id,
						query: {
	                        coupon_price: this.products.zk_final_price - this.products.coupon_info,
			                origin_price: this.products.zk_final_price,
			                imgList: this.imgList,
			                title: this.products.title,
			                url: this.products.coupon_click_url,
			                type: this.type,
			                PWD: this.PWD
						}
					})
            	}else if (this.type == 3) {
            		this.$router.push({
						path: '/share/goods/' + this.goods_id,
						query: {
	                        coupon_price: this.products.coupon_price,
			                origin_price: this.products.origin_price,
			                imgList: this.imgList,
			                title: this.products.title,
			                url: this.products.quan_link,
			                type: this.type
						}
					})
            	}else if (this.type == 4) {
            		this.$router.push({
						path: '/share/goods/' + this.goods_id,
						query: {
	                        coupon_price: this.products.coupon_price,
			                origin_price: this.products.min_group_price,
			                imgList: this.imgList,
			                title: this.products.goods_name,
			                url: this.products.short_url,
			                type: this.type
						}
					})
            	}
            	
            },
			conShow: function(){
				this.cShow = !this.cShow;
			},
			imageShow: function(){
				this.imgShow = true;
				this.itemShow = false;
			},
			titleShow: function(){
				this.imgShow = false;
				this.itemShow = true;
			},
			goApp: function(){
				if (this.type == 1 || this.type == 2 ) {
					this.diaShow = true;
				}else if (this.type == 3) {
					window.location.href = this.products.quan_link;
				}else if (this.type == 4) {
					window.location.href = this.pddUrlList.short_url;
				}				
			},
			handleScroll: function(){
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var containerH = document.getElementById("pd-header").clientHeight;
                if(scrollTop > 600 ){
                	this.topclass = true
                }else if(scrollTop < 600){
                	this.topclass = false
                }
                if( scrollTop > -1 && scrollTop < containerH ){
                	var high = scrollTop/containerH;               	
                	high = Math.round(parseFloat(high) * 10) / 10;
                    // var ah = getComputedStyle(document.getElementById('article-top'),null).getPropertyValue('opacity');
                    const test = document.querySelector('.pd-top');
                    test.style.opacity = high;
                }else if ( scrollTop > containerH || scrollTop == containerH) {
                	const test = document.querySelector('.pd-top');
                	test.style.opacity = 1;
                }
            },
            goIndex: function(){
            	this.$router.push('/')
            },
            goUser: function(){
            	this.$router.push('/user')
            },
            collect: function(){
            	if(this.is_collect == 0){
            		this.is_collect =1
            	}else{
            		this.is_collect = 0
            	}
                document.getElementById('help').style.display="none";
            	var params = new URLSearchParams();
            	params.append('is_collect', this.is_collect);
            	params.append('origin_id', this.goods_id);
            	params.append('type', this.is_tmall);
            	axios.post(Http.COLLECT, params)
            	.then( res => {
            		var ret =res.data;
            	})
            },
			getData(){
				var self = this;
                self.$jsonp('https://acs.m.taobao.com/h5/mtop.taobao.detail.getdetail/6.0/?data={"itemNumId"%3A"'+this.goods_id+'"}').then( res => {
                	var ret = res.data;
                    var arr = ret['item']['images'];
                    arr.forEach(function(item){
						self.imgList.push(item);
					})
                    self.goods = ret['item'];
                    self.items = ret['props']['groupProps'][0]['基本信息'];
                })
			},
			getProData(){
				this.$jsonp('http://h5api.m.taobao.com/h5/mtop.taobao.detail.getdesc/6.0/?jsv=2.4.11&appKey=12574478&t=1538180732308&sign=e93a97b7e9a9a459297f4e689051c895&api=mtop.taobao.detail.getdesc&v=6.0&type=json&dataType=json&data={"id":"' +
                this.goods_id + '","type":"0","f":"TB1AsvbfnqWBKNjSZFx8qwpLpla"}').then( res => {
                	var ret = res.data;
                	var arr = res.data.wdescContent.pages;
                	for (var i = 0; i < arr.length; i++) {
                        var start = arr[i].indexOf('//');
                        var str = arr[i].replace("</img>", "");
                        str = str.substr(start);
                        this.proImgList.push('https:' + str);
                    }
                })
			},
			// getPddProData(){
			// 	$.get('http://demo.13148687.cn/app/index.php?i=1&c=entry&op=jsonp&iid=' +
   //              this.goods_id + '&do=view&m=nice_pdd').then( res => {
   //              	var ret = res.data;
   //              	console.log(111 + ret)
   //              	var arr = res.data.wdescContent.pages;
   //              	// for (var i = 0; i < arr.length; i++) {
   //               //        var start = arr[i].indexOf('//');
   //               //        var str = arr[i].replace("</img>", "");
   //               //        str = str.substr(start);
   //               //        this.proImgList.push('https:' + str);
   //               //    }
   //              })
			// },
			// getJdProData(){
			// 	$.get('http://demo.13148687.cn/app/index.php?i=1&c=entry&op=jsonp&do=view&m=nice_jd&iid=' +
   //              this.goods_id).then( res => {
   //              	var ret = res.data;
   //              	console.log(111 + ret)
   //              	var arr = res.data.wdescContent.pages;
   //              	for (var i = 0; i < arr.length; i++) {
   //                      var start = arr[i].indexOf('//');
   //                      var str = arr[i].replace("</img>", "");
   //                      str = str.substr(start);
   //                      this.proImgList.push('https:' + str);
   //                  }
   //              })
			// },
			getUrl(){
				var params = new URLSearchParams();
            	params.append('model', this.model);
            	params.append('num_iid', this.goods_id);
            	axios.post(Http.GETURL, params)
            	.then( res => {
            		var ret =res.data;
            		this.products = ret.data;
            		this.root_price = (this.products.zk_final_price - this.products.coupon_info).toFixed(1);
            		this.PWD = ret.data.tbk_pwd;
            		var c_price = (this.products.zk_final_price - this.products.coupon_info).toFixed(1);
	            		this.pwd_c = this.products.title + ("\n") + 
								'【在售价】' + this.products.zk_final_price + '元' + ("\n") +
								'【优惠券】' + this.products.coupon_info  + '元' + ("\n") +
								'【券后价】' + c_price + '元' + ("\n") +
								'复制这条信息，' + this.PWD + '，打开【手机淘宝】即可领券下单'
            	})
			},
			getLikeData(){
				this.itemid = this.$route.params.id;
				var params = new URLSearchParams();
				params.append('itemid', this.itemid);
				axios.post(Http.GOODSLIKES, params)
				.then( res => {
					this.goodsList = res.data.data;
				})
			},
			getJdData(){
				var self = this;
				self.itemid = self.$route.params.id;
				var params = new URLSearchParams();
				params.append('id', self.itemid);
				axios.post(Http.JDGOODSINFO, params)
				.then( res => {
					var ret =res.data;
					self.products = ret.data;
					var arr = ret.data.image
					arr.forEach(function(item){
						self.imgList.push(item);
					})
				})
			},
			getPddData(){
				var self = this;
				self.itemid = self.$route.params.id;
				var params = new URLSearchParams();
				params.append('id', self.itemid);
				axios.post(Http.PDDGOODSDETAIL, params)
				.then( res => {
					var ret = res.data;
					self.products = ret.data;
					var arr= ret.data.goods_gallery_urls;
					arr.forEach(function(item){
						self.imgList.push(item);
					})
				})
			},
			getPddUrl(){
				this.itemid = this.$route.params.id;
				var params = new URLSearchParams();
				params.append('id', this.itemid);
				axios.post(Http.PDDCOUPONURL, params)
				.then( res => {
					var ret = res.data;
					this.pddUrlList = ret.data; 
				})
			}
		},
		destroyed: function() {//离开该页面需要移除这个监听的事件
			this.isLoadDom = false;
            window.removeEventListener('scroll', this.handleScroll);
        },
	}
</script>
<style lang="scss" scoped>
	.product-detail{
		background: #fff;
		width: 100%;
		overflow: hidden;
		.pd-header{
			.ah-back{
				position: fixed;
				top: 0;
				left: 0;
				z-index: 99;
				width: 0.88rem;
				height: 0.88rem;
				text-align: center;
				i{
					display: inline-block;
					margin-top: 0.19rem;
					width: 0.5rem;
					height: 0.5rem;
					text-align: center;
					line-height: 0.5rem;
					color: #333;
					font-size: 0.44rem;
					font-weight: 400;
				}
			}
			.pd-topimg{
				height: 7.2rem;
				img{
					height: 7.2rem;					
				}
			}
			.more{
				position: fixed;
				top: 0;
				right: 0;
				z-index: 999;
				width: 0.88rem;
				height: 0.88rem;
				text-align: center;
				i{
					display: inline-block;
					margin-top: 0.19rem;
					width: 0.5rem;
					height: 0.5rem;
					text-align: center;
					line-height: 0.5rem;
					background: rgba(256,256,256,0.8);
					border-radius: 0.5rem;
					color: #333;
					font-size: 0.44rem;
					font-weight: 400;
				}
				.more-c{
					position: absolute;
					top: 0.8rem;
					right: 0.1rem;
					span{
						position: absolute;
						width: 0;
						height: 0;
						border-left: 5px solid transparent;
					    border-right: 5px solid transparent;
					    border-bottom: 5px solid rgba(0,0,0,0.7);
					}
					ul{
						margin-top: 5px;
						width: 1rem;
						padding-top: 0.1rem;
						background: rgba(0,0,0,0.7);
						border-radius: 0.06rem;
						li{
							line-height: 0.6rem;
							font-size: 0.24rem;
							color: #fff;
						}
					}
				}
			}	
		}
		.pd-top{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			background: #fff;
			opacity: 0;
			width: 100%;
			height: 0.88rem;
			line-height: 0.88rem;
			.at-back{
				position: absolute;
				top: 0;
				left: 0;
				width: 0.88rem;
				height: 0.88rem;
				text-align: center;
				i{
					display: inline-block;
					font-size: 0.4rem;
					font-weight: 700;
				}
			}
			.at-content{
				margin: 0 1rem;
				text-align: center;
				font-size: 0.30rem;
			}
			.more{
				position: fixed;
				top: 0;
				right: 0;
				z-index: 999;
				width: 0.88rem;
				height: 0.88rem;
				text-align: center;
				i{
					display: inline-block;
					margin-top: 0.19rem;
					width: 0.5rem;
					height: 0.5rem;
					text-align: center;
					line-height: 0.5rem;
					color: #333;
					font-size: 0.44rem;
					font-weight: 400;
				}
				.more-c{
					position: absolute;
					top: 0.8rem;
					right: 0.1rem;
					span{
						position: absolute;
						width: 0;
						height: 0;
						border-left: 5px solid transparent;
					    border-right: 5px solid transparent;
					    border-bottom: 5px solid rgba(0,0,0,0.7);
					}
					ul{
						margin-top: 5px;
						width: 1rem;
						padding-top: 0.1rem;
						background: rgba(0,0,0,0.7);
						border-radius: 0.06rem;
						li{
							line-height: 0.6rem;
							font-size: 0.24rem;
							color: #fff;
						}
					}
				}
			}
		}
		.pd-profile{
			padding-bottom: 0.3rem;
			width: 100%;
			.pdp-title{
				padding: 0.24rem;
				padding-bottom: 0.1rem;
				.two-line{
					text-align: justify;
					font-size: 0.28rem;
					span{
						margin-right: 0.1rem;
						display: inline-block;
						width: 0.28rem;
						height: 0.28rem;
						&.TBimg{
							background: url(../assets/img/taobao.png) center center no-repeat;
							background-size: contain;
						}
						&.TMimg{
							background: url(../assets/img/tmall.png) center center no-repeat;
							background-size: contain;
						}
						&.JDimg{
							background: url(../assets/img/jd.png) center center no-repeat;
							background-size: contain;
						}
						&.PDDimg{
							background: url(../assets/img/pinduoduo_icon.png) center center no-repeat;
							background-size: contain;
						}
					}
				}
			}
			.pdp-subtitle{
				color: rgb(255,101,68);
				font-size: 0.20rem;
				margin: 0 0.24rem;
				text-align: left;
			}
		}
		.pdp-price{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0.2rem 0.24rem;
			&.active{
				margin-top: 0;
			}
			.pdp-origin{
				display: flex;
				align-items: center;;
				.coupon-price{
					margin-right: 0.20rem;
					font-size: 0.44rem;
					font-weight: 700;
					color: rgb(255,101,68);
					span{
						font-size: 0.20rem;
						font-weight: 100;
					}
				}
				.origin-price{
					font-size: 0.20rem;
					color: #999;
					span{
						text-decoration: line-through;
					}
				}
			}
			.pdp-sale{
				font-size: 0.26rem;
				color: #999;
			}
		}
		.pdp-coupon{
			margin: 0 0.24rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 1.6rem;
			// background: url(../assets/img/h1_con.png) center top no-repeat;
			// background-size: 100% 100%;
			border-radius: 0.1rem;
			color: #fff;
			.coupon-left{
				flex: 0 0 60%;
				p{
					margin-bottom: 0.14rem;
					font-size: 0.34rem;
				}
				span{
					font-size: 0.20rem;
				}
			}
			.coupon-right{
				flex: 0 0 36%;
				height: 100%;
				line-height: 1.6rem;
				font-size: 0.34rem;
				border-left: 0.04rem dashed #fff;
				position: relative;
				div{
					position: absolute;
					background: #fff;
					z-index: 99;
					&.dott{
						width: 0.26rem;
						height: 0.26rem;
						border-radius: 0.26rem;
						top: -0.13rem;
						left: -0.145rem;
					}
					&.dotb{
						width: 0.26rem;
						height: 0.26rem;
						border-radius: 0.26rem;
						bottom: -0.13rem;
						left: -0.145rem;
					}
					&.dots{
						top: 0;
						right: -0.075rem;
						width: 0.15rem;
						background: rgba(256,256,256,0);
						.dot{
							position: relative;
							width: 0.15rem;
							height: 0.15rem;
							border-radius: 0.15rem;
							margin: 0.1rem 0;
						}
					}
				}
			}
		}
		.pd-detail{
			width: 100%;
			.pdd-header{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 0.24rem;
				height: 0.8rem;
				line-height: 0.8rem;
				p{
					text-align: left;
					font-size: 0.26rem;
				}
				i{
					font-size: 0.44rem;
				}
			}
			.pdd-content{
				.pdd-content-nav{
					display: flex;
					background:  #fff;
					p{
						flex: 0 0 50%;
						height: 0.88rem;
						line-height: 0.88rem;
						&.active{
							background: #f5f5f5;
							border-bottom: 0.02rem solid rgb(255,101,68);
							box-sizing: border-box;
						}
					}
				}
				.pdd-content-imgs{
					width: 92%;
					padding: 0 4%;
					background: #f5f5f5;
					img{
						width: 100%;
					}
				}
				.pdd-content-items{
					background: #f5f5f5;
					p{
						width: 92%;
						padding: 4%;
						text-align: left;
					}
				}
				.img-none{
					padding-bottom: 0.6rem;
					background: #f5f5f5;
					img{
						width: 60%;
					}
				}
			}
		}
		.pd-detail-pdd{
			width: 100%;
			h1{
				width: 100%;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.28rem;
			}
			p{
				text-align: justify;
				font-size: 0.26rem;
				color: #666;
				padding: 4%;
				padding-top: 0;
			}
		}
		.pd-like{
			background: #e9ecf1;
			.pd-like-header{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 0.88rem;
				background: #fff;
				margin-bottom: 0.08rem;
				.title{
					margin: 0 0.4rem;
					.icon{
						width: 0.88rem;
						height: 0.88rem;
						display: inline-block;
						vertical-align: middle;
						background: url(../assets/img/xin.png) center center no-repeat;
						background-size: 0.44rem;
					}
				}
			}
		}
		.pd-footer{
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 92%;
			padding: 0 4%;
			background: #fff;
			height: 1.02rem;
			font-size: 0.26rem;
			.pd-footer-left{
				flex: 0 0 22%;
				height: 1.02rem;
				line-height: 1.02rem;
				&.active{
					color: #ff3d00;
				}
				span{
					margin-left: 0.1rem;
				}
				i{
					font-size: 0.3rem;
				}
			}
			.pd-footer-mid{
				flex: 0 0 34%;
				margin-left: 0.2rem;
				height: 0.66rem;
				line-height: 0.66rem;
				border-radius: 0.1rem;
				background: linear-gradient(to left,#447eff, #36acff);
				color: #fff;
				span{
					margin-left: 0.1rem;
				}
				i{
					font-size: 0.3rem;
				}
			}
			.pd-footer-right{
				flex: 0 0 34%;
				height: 0.66rem;
				line-height: 0.66rem;
				border-radius: 0.1rem;
				background: linear-gradient(to right,rgb(255,101,68), $color);
				color: #fff;
				.pdf-coupon{
					display: inline-block;
					vertical-align: middle;
					width: 0.34rem;
					height: 0.34rem;
					background: url(../assets/img/qian.png) center center no-repeat;
					background-size: contain;
				}
				span{
					margin-left: 0.1rem;
					vertical-align: middle;
				}
			}
		}
		.dialog{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.6);
			.dia-content{
				position: absolute;
				top: 2rem;
				width: 90%;
				margin-left: 5%;
				border-radius: 0.1rem;
				background: #fff;
				.dc-header{
					width: 100%;
					height: 0.6rem;
					line-height: 0.6rem;
					background: $color;
					color: #fff;
					border-radius: 0.1rem 0.1rem 0 0;
				}
				.dc-text{
					margin: 0.2rem;
					padding: 0.2rem;
					border: 0.02rem dashed $color;
					color: $color;
					background: #fbf4f5;
					text-align: left;
					font-size: 0.24rem;
				}
				.dc-btn{
					margin: 0.1rem 0.2rem;
					height: 0.6rem;
					position: relative;
					p{
						position: absolute;
						top: 0;
						right: 0;
						padding: 0 0.2rem;
						height: 0.44rem;
						line-height: 0.44rem;
						border-radius: 0.44rem;
						background: $color;
						color: #fff;
						font-size: 0.24rem;
					}
				}
				.dc-tip{
					margin: 0.2rem;
					font-size: 0.20rem;
					color: #666;
					text-align:	left;
					span{
						display: inline-block;
						vertical-align: middle;
						width: 0.4rem;
						height: 0.16rem;
						border: 0.01rem dashed $color;
					}
				}
			}
			.dia-close{
				position: absolute;
				bottom: 2rem;
				left: 50%;
				margin-left: -0.5rem;
				width: 1rem;
				height: 1rem;
				border-radius: 1rem;
				line-height: 1rem;
				background: rgba(0,0,0,0.4);
				color: #fff;
				i{
					font-size: 0.44rem;
				}
			}
		}
		.float-box{
			position: fixed;
			top: 40%;
			right: 0;
			z-index: 9;
			div{
				padding: 0.1rem 0.24rem 0.1rem 0.66rem;
				font-size: 0.20rem;
				&.fb-top{
					background: url(../assets/img/goods_icon_upgrade.png) left center no-repeat;
					background-size: contain;
					p{
						color: rgba(256,256,256,0.8);
					}
				}
				&.fb-bottom{
					background: url(../assets/img/goods_icon_commission.png) left center no-repeat;
					background-size: contain;
					p{
						color: rgba(256,256,256,0.8);
					}
				}
			}
		}
		.no-place{
			height: 1rem;
		}
	}
</style>